<template>
  <div class="xinxlist">
    <!-- 首图 -->
    <banner :bdata="bannerData"></banner>

    <!-- 列表 -->
    <ul class="xinxlist_warp_ul">
      <li class="xinxlist_warp_li" v-for="(item, i) in necessary" :key="i">
        <div class="xinxlist_item_left" @click="handelDetail(item)">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="xinxlist_item_right">
          <h2 @click="handelDetail(item)">{{ item.onecon }}</h2>
          <div class="xinxlist_item_right_p">
            <p>{{ item.lastp }}</p>
            <p>{{ item.fastp }}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import banner from "@/components/banner"; //首图

export default {
  name: "xinxlist",
  components: {
    banner,
  },
  data() {
    return {
      bannerData: {
        bkImage: {
          backgroundSize: "auto 100%",
          backgroundRepeat: "no-repeat",
          backgroundImage:
            "url(" +
            require("@/assets/product_page_title/top_page_infor_whatsapp_bg@2x.png") +
            ")",
        },
        list: {
          title: null,
          content:
            "所有与whatsapp相关信息，包括whatsapp拓客系统、whatsapp引流技巧、whatsapp群发消息whatsapp介绍、whatsapp海外资讯、whatsapp私域流量玩法、whatsapp群组等等",
        },
      },
      necessary: [
        {
          imgUrl: require("@/assets/infor_whatsapp/1640930415(1).png"),
          onecon: "WhatsApp账号防封技巧，WhatsApp营销必备",
          lastp: "51客服系统，未分类",
          fastp: "2021年11月23日",
        },
        {
          imgUrl: require("@/assets/infor_whatsapp/1640930415(1).png"),
          onecon: "WhatsApp筛选系统后台操作手册-支持筛开通",
          lastp: "51客服系统，未分类",
          fastp: "2021年11月23日",
        },
        {
          imgUrl: require("@/assets/infor_whatsapp/1640930415(1).png"),
          onecon: "Whatsapp拓客系统使用介绍(一) :",
          lastp: "51客服系统，未分类",
          fastp: "2021年11月23日",
        },
        {
          imgUrl: require("@/assets/infor_whatsapp/1640930415(1).png"),
          onecon: "Whatsapp群组搜索方法大全,亲测有效的获取",
          lastp: "51客服系统，未分类",
          fastp: "2021年11月23日",
        },
        {
          imgUrl: require("@/assets/infor_whatsapp/1640930415(1).png"),
          onecon: "Whatsapp拓客系统使用介绍(二) :",
          lastp: "51客服系统，未分类",
          fastp: "2021年11月23日",
        },
        {
          imgUrl: require("@/assets/infor_whatsapp/1640930415(1).png"),
          onecon: "Whatsapp拓客系统使用介绍(三) :",
          lastp: "51客服系统，未分类",
          fastp: "2021年11月23日",
        },
      ],
    };
  },
  methods: {
    handelDetail(i) {
      // console.log(i);
      this.$router.push('/xinxi')
    },
  },
};
</script>

<style scoped>
.xinxlist /deep/ .banner_warp_item_p > p {
  color: #1d2845;
  font-weight: bold;
}
.xinxlist /deep/ .banner_warp_item_p > p {
  color: #1d2845;
  font-weight: bold;
}
.xinxlist /deep/ .banner_warp_item_p > p {
  font-size: 1.2em;
  width: 68%;
}
.xinxlist /deep/ .banner {
  height: 300px;
}
.xinxlist_warp_ul {
  background: #f7f7f8;
  padding: 10px 15px 25px 15px;
}
.xinxlist_warp_li {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.xinxlist_item_left {
  width: 32%;
}
.xinxlist_item_left > img {
  width: 100%;
}
.xinxlist_item_right {
  width: 64%;
}
.xinxlist_item_right > h2 {
  font-size: 1.2em;
}
.xinxlist_item_right_p {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: #6f7b8e;
}
</style>